<template>
	<el-drawer v-model="drawer" :with-header="false" @close="close" :append-to-body="true" :size="size" ref="drawerRef"
		class="customer-detail-drawer" :modal="true" modal-class="customer-modal">

		<div class="page-container">
			<div class="card-header">
				<span style="font-weight: 700;">基础信息</span>
				<el-button v-if="isEdit" :size="sizeType" type="primary">编辑</el-button>
				<el-button v-if="isEdit" :size="sizeType" type="primary">保存</el-button>
			</div>
			<el-form ref="ruleRefForm" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm"
				size="small" status-icon>
				<el-form-item>
				</el-form-item>
				<el-form-item label="姓名" prop="realName">
					<el-input v-model="form.realName" :disabled="true" style="width:200px;margin-right:20px" />
					<el-button :size="sizeType" type="primary" @click="selectUser">选择成员</el-button>
				</el-form-item>
				<el-form-item label="私教昵称" prop="nickname">
					<el-input v-model="form.nickName" />
				</el-form-item>
				<el-form-item label="联系方式" prop="mobile">
					<el-input v-model="form.mobile" />
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input-number v-model="form.age" :min="1" :max="100" />
				</el-form-item>
				<el-form-item label="地区" prop="address">
					<el-input v-model="form.address" />
				</el-form-item>
				<el-form-item label="入职时间" prop="createdAt">
					<el-date-picker v-model="form.createdAt" type="date" placeholder="请输入入职时间"
						value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="身份信息" prop="name">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="银行信息" prop="name">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="个人特长" prop="motto">
					<el-input v-model="form.motto" type="textarea" />
				</el-form-item>
			</el-form>


			<div class="card-header">
				<span style="font-weight: 700;">专业信息</span>
				<el-button v-if="isEdit" :size="sizeType" type="primary">编辑</el-button>
			</div>
			<el-form :model="form" :rules="rules" label-width="120px" class="demo-ruleForm"
				size="small" status-icon>
				<el-form-item>
				</el-form-item>
				<el-form-item label="服务等级" prop="name">
          <el-select v-model="form.level" class="m-2" placeholder="请选择" size="small">
            <el-option
                v-for="item in userCustomerServiceLevelList"
                :key="item.level"
                :label="item.name"
                :value="item.level"
            />
          </el-select>
				</el-form-item>
				<el-form-item label="经验" prop="name">
					100
				</el-form-item>
				<el-form-item label="服务单价" prop="name">
					10 币/分钟
				</el-form-item>
			</el-form>

			<div class="card-header">
				<span style="font-weight: 700;">服务信息</span>
				<el-button v-if="isEdit" :size="sizeType" type="primary">编辑</el-button>
			</div>

			<el-form  :model="form" :rules="rules" label-width="120px" class="demo-ruleForm"
				size="small" status-icon>
				<el-form-item>
				</el-form-item>
				<el-form-item label="负责模块" prop="name">
          <el-select
              v-model="form.tags"
              multiple
              placeholder="请选择"
              style="width: 240px"
          >
            <el-option
                v-for="item in moduleLists"
                :key="item.id"
                :label="item.moduleName"
                :value="item.id"
            />
          </el-select>
				</el-form-item>
				<el-form-item label="订单数" prop="name">
					100
				</el-form-item>
				<el-form-item label="平台累计收益" prop="name">
					10 币/分钟
				</el-form-item>
				<el-form-item label="个人累计收入" prop="name">
					10 币/分钟
				</el-form-item>
			</el-form>



		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" :size="sizeType" @click="submitForm(ruleRefForm)">保存</el-button>
				<el-button :size="sizeType" @click="close">取消</el-button>
			</span>
		</template>

		<el-dialog v-model="dialogBannerVisible" title="图片预览">
			<img w-full :src="dialogImageUrl" alt="图片预览" style="display:block;margin: 0 auto;width:100%" />
		</el-dialog>

		<div class="tabs-list">
			<div class="close-btn" @click="close">
				<el-icon color="var(--next-color-white)" size="28px">
					<ele-CircleClose />
				</el-icon>
			</div>
		</div>

    <el-dialog v-model="exportVisible" title="添加客服" destroy-on-close width="40%">
      <el-table :data="userTableList" size="small"  class="table-box" :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="nickname" label="客服姓名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column fixed="right" label="Operations" width="120">
          <template  #default="scope">
            <el-button link type="primary" size="small" @click="handleSelectClick(scope.row)"
            >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page-block">
        <el-pagination v-model:currentPage="userParams.current" v-model:page-size="userParams.size"
                       :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
                       layout="total, sizes, prev, pager, next, jumper" :total="userTotal" :hide-on-single-page="true"
                       @size-change="userSizeChange" @current-change="getUserPages" />
      </div>
    </el-dialog>

	</el-drawer>
</template>

<script>
	import {
		toRefs,
		computed,
		reactive,
		watch,
		onMounted,
		ref,
		nextTick
	} from 'vue'
	import {
		ElMessage,
		ElMessageBox,
		ElInput
	} from 'element-plus'
	import {
		create,
		update
	} from '/@/api/ws/article'
	import Editor from '/@/components/editor/index.vue'
	import {
		Session
	} from '/@/utils/storage'
	import {
		getAllList,
		getCollectionList
	} from '/@/api/ws/articleClass'
  import { getUserPage } from '/@/api/sys/user/index'
  import { useChatApi } from '/@/api/chat/index'
	export default {
		name: 'DetailForm',
		components: {
			Editor,
			// ArticleClassDetailForm,
			// SelectShop
		},
		props: {
			dialogDrawer: {
				type: Boolean,
				default: false
			},
			defaultForm: {
				type: Object,
				default () {
					return {}
				}
			},
      isEdit: {
        type: Boolean,
        default: false
      },
		},
		setup(props, context) {
			const {
				defaultForm
			} = toRefs(props)
      const chatApi = useChatApi()
			const uploadBanner = ref()
			const state = reactive({
				uploadUrl: '/api/file/filaAttach/upload',
				headers: {
					'17work': Session.get('token')
				},
				dialogImageUrl: null,
				dialogBannerVisible: false,
				rules: {
          realName: [{
						required: true,
						message: '请选择用户',
						trigger: 'blur'
					}],
					collectionTypeId: [{
						required: true,
						message: '请选择收录类型',
						trigger: 'change'
					}],
					articleType: [{
						required: true,
						message: '请选择发布类型',
						trigger: 'change'
					}],
				},
				dialogArticleClassFormVisible: false,
				classOptions: [],
				collectionTypeOptions: [],
				//标签
				dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
				inputVisible: false,
				inputValue: '',
				dialogShopVisible: false,
				sizeType: 'small',
        //选择用户
        exportVisible:false,
        userParams: {
          current: 1,
          size: 10
        },
        userTableList:[],
        userTotal:10,
        userCustomerServiceLevelList:[],
        moduleLists:[]
			})
			const defaultTime = new Date()
			let form = computed({
				get: () => defaultForm.value,
				set: val => {
					context.emit('update:defaultForm', val)
				}
			})
			const {
				dialogDrawer,
				ruleRefForm
			} = toRefs(props)
			let drawer = computed({
				get: () => dialogDrawer.value,
				set: (val) => {
					context.emit('update:dialogDrawer', val)
				}
			})
			watch(() => dialogDrawer.value, val => {
				context.emit("update:dialogDrawer", val)
				if (val) {
					getLevel()
          getModules()
					nextTick(() => {
						if (document.querySelector('.el-drawer__body')) {
							document.querySelector('.el-drawer__body').onscroll = e => {
								state.scrollTop = e.target.scrollTop
							}
						}
						if (document.querySelector('.refLine')) {
							state.refLineTop = document.querySelector('.refLine').offsetTop
						}
					})
				}
			})
			const getSize = () => {
				if (document.body.clientWidth <= 1400) {
					return '1220px'
				} else {
					return '85%'
				}
			}

			state.size = getSize()
			const close = () => {
				context.emit("update:dialogDrawer", false)
			}

			const submitForm = async (formEl) => {

				if (!formEl) return
				await formEl.validate((valid) => {
					if (valid) {
						let data = form.value
            console.log(data)

					}
				})

			}
			const handlePictureCardPreview = (file) => {
				state.dialogImageUrl = file.url
				state.dialogBannerVisible = true
			}
			const handleRemove = (val, file) => {
				uploadBanner.value.handleRemove(file)
			}
			const backageImagesOnSuccess = (response, uploadFiles) => {
				let data = form.value.backageImage
				data.forEach((e, index) => {
					if (e.name == 'images') {
						data[index] = e
					} else {
						try {
							data[index] = {
								name: e.response.data.name,
								src: e.response.data.src,
								url: e.response.data.src
							}
						} catch (err) {
							data[index] = {
								name: e.name,
								src: e.src,
								url: e.src
							}
						}
					}
				})
				form.value.backageImage = data
			}
			const openShowClass = () => {
				state.dialogArticleClassFormVisible = true
			}
			const onArticleClassSubmit = (row) => {

			}
			const emitClass = () => {
				console.log(state.classOptions)
			}
			const showInput = (val) => {
				state.inputVisible = true
				document.getElementById(form.value.articleTags[val])?.focus()
			}

			const handleInputConfirm = () => {
				console.log(state.inputValue)
				if (state.inputValue) {
					form.value.articleTags.push({
						id: '',
						tagName: state.inputValue
					})
				}
				state.inputVisible = false
				state.inputValue = ''
			}
			const handleCloseTags = (tag) => {
				form.value.articleTags.splice(form.value.articleTags.indexOf(tag), 1)
			}

			// 选择用户
      const selectUser = () => {
          state.exportVisible = true
          getUserPage(state.userParams).then(res =>{
              state.userTableList = res.data.records
              state.userTotal = res.data.total
          })
      }

      const handleSelectClick = (data) => {
        state.exportVisible = false
        form.value.id = data.id
        form.value.realName = data.nickname
        form.value.nickName = data.nickname
        form.value.mobile = data.phone
      }

      const getLevel = () => {
        chatApi.userCustomerServiceLevelList2().then(res =>{
            state.userCustomerServiceLevelList = res.data
        })
      }
      const getModules = () => {
        chatApi.getModuleList().then(res =>{
          state.moduleLists = res.data
        })
      }

			onMounted(() => {

			})
			return {
				drawer,
				form,
				submitForm,
				ruleRefForm,
				handlePictureCardPreview,
				handleRemove,
				backageImagesOnSuccess,
				uploadBanner,
				openShowClass,
				onArticleClassSubmit,
				emitClass,
				handleCloseTags,
				handleInputConfirm,
				showInput,
        selectUser,
        handleSelectClick,
        getLevel,
        getModules,
				...toRefs(state),
				close
			}
		}
	}
</script>

<style lang="scss">
	.page-container {
		padding: 20px 0px 0px 20px;
		.card-header {
			width: 600px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.demo-ruleForm{
			width: 600px;
			margin-bottom: 25px;
		}
	}

	.customer-detail-drawer {
		overflow: unset;
		position: fixed;
	}

	// .customer-modal {
	// 	//left: unset;
	// }

	.action-popper {
		background: transparent !important;
		position: relative;

		&:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--el-color-primary-light-9);
			opacity: .8;
			filter: grayscale(100%);
		}

		.el-popper__arrow::before {
			background: var(--el-color-primary-light-9) !important;
			opacity: .8;
			filter: grayscale(100%);
		}

		.sale-title {
			color: var(--el-text-color-primary);
		}
	}

	.tabs-list {
		position: absolute;
		top: 90px;
		left: -50px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		overflow: auto;
		max-height: 100%;

		// .tabs-cell{
		//     background: var(--next-color-white);
		//     margin-bottom: 3px;
		//     min-width: 60px;
		//     text-align: right;
		//     padding: 0 5px;
		//     cursor: pointer;
		//     font-size: 12px;
		//     border-radius: 5px 0 0 5px;
		//     box-shadow: rgba(0, 0, 0, 0.15) -1.95px -1.95px 2.6px;
		//     color: var(--el-text-color-secondary);
		//     transition: .1s;
		//     min-height: 35px;
		//     display: flex;
		//     flex-direction: column;
		//     align-items: center;
		//     justify-content: center;
		//     filter: brightness(.85);
		// }
		// .tabs-cell:hover,
		// .active{
		//     background: var(--el-color-primary-dark-2);
		//     color: var(--el-color-primary-light-9);
		//     padding: 5px 8px;
		//     min-width: 70px;
		//     font-size: 14px;
		//     font-weight: bold;
		//     filter: brightness(1)
		// }
		.close-btn {
			width: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			background: var(--el-color-primary);
			padding: 5px 0;
			border-radius: 5px 0 0 5px;
		}
	}

	.company-title {
		text-align: center;
		font-size: 18px;
		color: var(--next-bg-menuBar-light-1);
		margin-bottom: 50px;
	}

	.app-container {
		// margin-top: 3px;
		background: #f9f9f9;
		min-height: calc(100vh - 95px);

		.question_header {
			background: #fff;
			padding: 20px;
			margin: 0 auto 10px;
			max-width: 1200px;
			border-radius: 16px;
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			position: sticky;
			top: 0;
			z-index: 10;
		}

		.answer_page {
			display: flex;
			align-items: flex-start;
			max-width: 1200px;
			margin: 0 auto;

			.title_box {
				//display: flex;
				align-items: flex-start;

				.answer_num {
					//width: 40px;
					font-weight: bold;
					font-size: 16px;
				}

				.answer_question {
					//flex: 1;
					overflow: hidden;
				}
			}

			.answer_card {
				flex: 1;
				overflow: hidden;
				margin-right: 10px;

				.answer_content_box {
					margin: 20px 0 20px 40px;
					border-bottom: 1px solid #eee;
				}
			}

			.question_card {
				width: 280px;
				position: sticky;
				top: 130px;

				.question_num_content {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.question_num {
						width: 35px;
						height: 35px;
						margin: 0 15px 12px 0;
						border-radius: 8px;
						border: 1px solid #eee;
						cursor: pointer;
						font-size: 14px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.question_num:hover {
						background: #409EFF;
						color: #fff;
						border-color: #409EFF;
					}

					.question_num:nth-child(5n+5) {
						margin-right: 0;
					}

					.success {
						background: rgba(#67C23A, .1);
						border-color: #67C23A;
						color: #67C23A;
					}

					.error {
						background: rgba(#F56C6C, .1);
						border-color: #F56C6C;
						color: #F56C6C;
					}
				}
			}

			.fixed_answer_icon {
				display: none;
			}

			@media screen and(max-width: 750px) {
				.answer_card {
					margin-right: 0;
				}

				.question_card {
					position: fixed;
					z-index: 99;
					top: unset;
					bottom: -100vh;
					width: 90%;

					.question_num_content {
						.question_num {
							margin-right: 12px;
						}

						.question_num:nth-child(5n+5) {
							margin-right: 12px;
						}
					}
				}

				.question_fixed_active {
					top: unset;
					bottom: 0;
					transition: .2s;
				}

				.fixed_answer_icon {
					display: block;
					position: fixed;
					width: 48px;
					height: 48px;
					background: #409EFF;
					z-index: 99;
					top: 40%;
					right: 0;
					border-radius: 8px 0 0 8px;
					display: flex;
					align-items: center;
					justify-content: center;

					i {
						font-size: 24px;
						color: #fff;
					}
				}
			}
		}
	}

	:deep(.el-image__error) {
		font-size: 12px;
	}

	.choice-row {
		margin: 3px 0;
		padding: 9px 15px;
		background: rgb(247, 248, 249);
	}

	.green-row {
		background-color: rgba(103, 194, 58, 0.5);
	}

	.red-row {
		background-color: rgba(245, 108, 108, 0.5);
	}

	// 答题卡小圆点
	.dot {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
	}

	.title_label {
		height: 40px;
		line-height: 40px;
	}

	.htmlPage {
		:deep(img) {
			width: 100% !important;
			height: 200px !important;
			object-fit: contain;
		}
	}

	.el-drawer__footer {
		height: 45px;
		padding-right: 35px;
	}
</style>
